<template>
  <div class="service-area-selector">
    <el-form-item label="服务范围类型" prop="areaType">
      <el-radio-group v-model="areaType" @change="handleAreaTypeChange">
        <el-radio label="nationwide">全国范围</el-radio>
        <el-radio label="province">省内服务</el-radio>
        <el-radio label="city">市内服务</el-radio>
        <el-radio label="district">区内服务</el-radio>
        <el-radio label="custom">自定义区域</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 全国范围 -->
    <div v-if="areaType === 'nationwide'" class="area-config">
      <el-alert
        title="全国范围服务"
        description="您的服务将覆盖全国所有地区，请确保您有能力提供全国范围的服务。"
        type="info"
        :closable="false"
        show-icon
      />
    </div>

    <!-- 省内服务 -->
    <div v-if="areaType === 'province'" class="area-config">
      <el-form-item label="选择省份" prop="selectedProvince">
        <el-select
          v-model="selectedProvince"
          placeholder="请选择省份"
          @change="handleProvinceChange"
          style="width: 100%"
        >
          <el-option
            v-for="province in provinces"
            :key="province.code"
            :label="province.name"
            :value="province.code"
          />
        </el-select>
      </el-form-item>
      
      <div v-if="selectedProvince" class="selected-area-info">
        <el-tag type="success">
          服务范围：{{ getProvinceName(selectedProvince) }}全省
        </el-tag>
      </div>
    </div>

    <!-- 市内服务 -->
    <div v-if="areaType === 'city'" class="area-config">
      <el-form-item label="选择省份" prop="selectedProvince">
        <el-select
          v-model="selectedProvince"
          placeholder="请选择省份"
          @change="handleProvinceChange"
          style="width: 100%"
        >
          <el-option
            v-for="province in provinces"
            :key="province.code"
            :label="province.name"
            :value="province.code"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="selectedProvince" label="选择城市" prop="selectedCities">
        <el-select
          v-model="selectedCities"
          placeholder="请选择城市"
          multiple
          collapse-tags
          collapse-tags-tooltip
          style="width: 100%"
        >
          <el-option
            v-for="city in currentCities"
            :key="city.code"
            :label="city.name"
            :value="city.code"
          />
        </el-select>
      </el-form-item>

      <div v-if="selectedCities.length > 0" class="selected-area-info">
        <el-tag
          v-for="cityCode in selectedCities"
          :key="cityCode"
          type="success"
          class="area-tag"
        >
          {{ getCityName(cityCode) }}
        </el-tag>
      </div>
    </div>

    <!-- 区内服务 -->
    <div v-if="areaType === 'district'" class="area-config">
      <el-form-item label="选择省份" prop="selectedProvince">
        <el-select
          v-model="selectedProvince"
          placeholder="请选择省份"
          @change="handleProvinceChange"
          style="width: 100%"
        >
          <el-option
            v-for="province in provinces"
            :key="province.code"
            :label="province.name"
            :value="province.code"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="selectedProvince" label="选择城市" prop="selectedCity">
        <el-select
          v-model="selectedCity"
          placeholder="请选择城市"
          @change="handleCityChange"
          style="width: 100%"
        >
          <el-option
            v-for="city in currentCities"
            :key="city.code"
            :label="city.name"
            :value="city.code"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="selectedCity" label="选择区县" prop="selectedDistricts">
        <el-select
          v-model="selectedDistricts"
          placeholder="请选择区县"
          multiple
          collapse-tags
          collapse-tags-tooltip
          style="width: 100%"
        >
          <el-option
            v-for="district in currentDistricts"
            :key="district.code"
            :label="district.name"
            :value="district.code"
          />
        </el-select>
      </el-form-item>

      <div v-if="selectedDistricts.length > 0" class="selected-area-info">
        <el-tag
          v-for="districtCode in selectedDistricts"
          :key="districtCode"
          type="success"
          class="area-tag"
        >
          {{ getDistrictName(districtCode) }}
        </el-tag>
      </div>
    </div>

    <!-- 自定义区域 -->
    <div v-if="areaType === 'custom'" class="area-config">
      <el-form-item label="自定义服务区域" prop="customArea">
        <el-input
          v-model="customArea"
          type="textarea"
          :rows="3"
          placeholder="请详细描述您的服务区域，如：北京市朝阳区、海淀区、西城区；上海市浦东新区、黄浦区等"
        />
      </el-form-item>
      
      <el-alert
        title="自定义区域说明"
        description="请详细描述您能够提供服务的具体区域，建议按照省市区的格式填写，多个区域用分号分隔。"
        type="warning"
        :closable="false"
        show-icon
      />
    </div>

    <!-- 服务区域预览 -->
    <div v-if="serviceAreaText" class="area-preview">
      <el-form-item label="服务区域预览">
        <div class="preview-content">
          <el-icon><Location /></el-icon>
          <span>{{ serviceAreaText }}</span>
        </div>
      </el-form-item>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Location } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'change'])

// 响应式数据
const areaType = ref('district') // 默认区内服务
const selectedProvince = ref('')
const selectedCity = ref('')
const selectedCities = ref([])
const selectedDistricts = ref([])
const customArea = ref('')

// 地区数据
const provinces = ref([
  { code: '110000', name: '北京市' },
  { code: '120000', name: '天津市' },
  { code: '130000', name: '河北省' },
  { code: '140000', name: '山西省' },
  { code: '150000', name: '内蒙古自治区' },
  { code: '210000', name: '辽宁省' },
  { code: '220000', name: '吉林省' },
  { code: '230000', name: '黑龙江省' },
  { code: '310000', name: '上海市' },
  { code: '320000', name: '江苏省' },
  { code: '330000', name: '浙江省' },
  { code: '340000', name: '安徽省' },
  { code: '350000', name: '福建省' },
  { code: '360000', name: '江西省' },
  { code: '370000', name: '山东省' },
  { code: '410000', name: '河南省' },
  { code: '420000', name: '湖北省' },
  { code: '430000', name: '湖南省' },
  { code: '440000', name: '广东省' },
  { code: '450000', name: '广西壮族自治区' },
  { code: '460000', name: '海南省' },
  { code: '500000', name: '重庆市' },
  { code: '510000', name: '四川省' },
  { code: '520000', name: '贵州省' },
  { code: '530000', name: '云南省' },
  { code: '540000', name: '西藏自治区' },
  { code: '610000', name: '陕西省' },
  { code: '620000', name: '甘肃省' },
  { code: '630000', name: '青海省' },
  { code: '640000', name: '宁夏回族自治区' },
  { code: '650000', name: '新疆维吾尔自治区' },
  { code: '710000', name: '台湾省' },
  { code: '810000', name: '香港特别行政区' },
  { code: '820000', name: '澳门特别行政区' }
])

const currentCities = ref([])
const currentDistricts = ref([])

// 城市数据（示例数据，实际应该从API获取）
const cityData = {
  '110000': [ // 北京市
    { code: '110100', name: '北京市' }
  ],
  '120000': [ // 天津市
    { code: '120100', name: '天津市' }
  ],
  '130000': [ // 河北省
    { code: '130100', name: '石家庄市' },
    { code: '130200', name: '唐山市' },
    { code: '130300', name: '秦皇岛市' },
    { code: '130400', name: '邯郸市' },
    { code: '130500', name: '邢台市' },
    { code: '130600', name: '保定市' },
    { code: '130700', name: '张家口市' },
    { code: '130800', name: '承德市' },
    { code: '130900', name: '沧州市' },
    { code: '131000', name: '廊坊市' },
    { code: '131100', name: '衡水市' }
  ],
  '310000': [ // 上海市
    { code: '310100', name: '上海市' }
  ],
  '320000': [ // 江苏省
    { code: '320100', name: '南京市' },
    { code: '320200', name: '无锡市' },
    { code: '320300', name: '徐州市' },
    { code: '320400', name: '常州市' },
    { code: '320500', name: '苏州市' },
    { code: '320600', name: '南通市' },
    { code: '320700', name: '连云港市' },
    { code: '320800', name: '淮安市' },
    { code: '320900', name: '盐城市' },
    { code: '321000', name: '扬州市' },
    { code: '321100', name: '镇江市' },
    { code: '321200', name: '泰州市' },
    { code: '321300', name: '宿迁市' }
  ],
  '330000': [ // 浙江省
    { code: '330100', name: '杭州市' },
    { code: '330200', name: '宁波市' },
    { code: '330300', name: '温州市' },
    { code: '330400', name: '嘉兴市' },
    { code: '330500', name: '湖州市' },
    { code: '330600', name: '绍兴市' },
    { code: '330700', name: '金华市' },
    { code: '330800', name: '衢州市' },
    { code: '330900', name: '舟山市' },
    { code: '331000', name: '台州市' },
    { code: '331100', name: '丽水市' }
  ],
  '440000': [ // 广东省
    { code: '440100', name: '广州市' },
    { code: '440200', name: '韶关市' },
    { code: '440300', name: '深圳市' },
    { code: '440400', name: '珠海市' },
    { code: '440500', name: '汕头市' },
    { code: '440600', name: '佛山市' },
    { code: '440700', name: '江门市' },
    { code: '440800', name: '湛江市' },
    { code: '440900', name: '茂名市' },
    { code: '441200', name: '肇庆市' },
    { code: '441300', name: '惠州市' },
    { code: '441400', name: '梅州市' },
    { code: '441500', name: '汕尾市' },
    { code: '441600', name: '河源市' },
    { code: '441700', name: '阳江市' },
    { code: '441800', name: '清远市' },
    { code: '441900', name: '东莞市' },
    { code: '442000', name: '中山市' },
    { code: '445100', name: '潮州市' },
    { code: '445200', name: '揭阳市' },
    { code: '445300', name: '云浮市' }
  ],
  '500000': [ // 重庆市
    { code: '500100', name: '重庆市' }
  ],
  '510000': [ // 四川省
    { code: '510100', name: '成都市' },
    { code: '510300', name: '自贡市' },
    { code: '510400', name: '攀枝花市' },
    { code: '510500', name: '泸州市' },
    { code: '510600', name: '德阳市' },
    { code: '510700', name: '绵阳市' },
    { code: '510800', name: '广元市' },
    { code: '510900', name: '遂宁市' },
    { code: '511000', name: '内江市' },
    { code: '511100', name: '乐山市' },
    { code: '511300', name: '南充市' },
    { code: '511400', name: '眉山市' },
    { code: '511500', name: '宜宾市' },
    { code: '511600', name: '广安市' },
    { code: '511700', name: '达州市' },
    { code: '511800', name: '雅安市' },
    { code: '511900', name: '巴中市' },
    { code: '512000', name: '资阳市' }
  ]
}

// 区县数据（示例数据）
const districtData = {
  '110100': [ // 北京市
    { code: '110101', name: '东城区' },
    { code: '110102', name: '西城区' },
    { code: '110105', name: '朝阳区' },
    { code: '110106', name: '丰台区' },
    { code: '110107', name: '石景山区' },
    { code: '110108', name: '海淀区' },
    { code: '110109', name: '门头沟区' },
    { code: '110111', name: '房山区' },
    { code: '110112', name: '通州区' },
    { code: '110113', name: '顺义区' },
    { code: '110114', name: '昌平区' },
    { code: '110115', name: '大兴区' },
    { code: '110116', name: '怀柔区' },
    { code: '110117', name: '平谷区' },
    { code: '110118', name: '密云区' },
    { code: '110119', name: '延庆区' }
  ],
  '120100': [ // 天津市
    { code: '120101', name: '和平区' },
    { code: '120102', name: '河东区' },
    { code: '120103', name: '河西区' },
    { code: '120104', name: '南开区' },
    { code: '120105', name: '河北区' },
    { code: '120106', name: '红桥区' },
    { code: '120110', name: '东丽区' },
    { code: '120111', name: '西青区' },
    { code: '120112', name: '津南区' },
    { code: '120113', name: '北辰区' },
    { code: '120114', name: '武清区' },
    { code: '120115', name: '宝坻区' },
    { code: '120116', name: '滨海新区' },
    { code: '120117', name: '宁河区' },
    { code: '120118', name: '静海区' },
    { code: '120119', name: '蓟州区' }
  ],
  '310100': [ // 上海市
    { code: '310101', name: '黄浦区' },
    { code: '310104', name: '徐汇区' },
    { code: '310105', name: '长宁区' },
    { code: '310106', name: '静安区' },
    { code: '310107', name: '普陀区' },
    { code: '310109', name: '虹口区' },
    { code: '310110', name: '杨浦区' },
    { code: '310112', name: '闵行区' },
    { code: '310113', name: '宝山区' },
    { code: '310114', name: '嘉定区' },
    { code: '310115', name: '浦东新区' },
    { code: '310116', name: '金山区' },
    { code: '310117', name: '松江区' },
    { code: '310118', name: '青浦区' },
    { code: '310120', name: '奉贤区' },
    { code: '310151', name: '崇明区' }
  ],
  '320100': [ // 南京市
    { code: '320102', name: '玄武区' },
    { code: '320104', name: '秦淮区' },
    { code: '320105', name: '建邺区' },
    { code: '320106', name: '鼓楼区' },
    { code: '320111', name: '浦口区' },
    { code: '320113', name: '栖霞区' },
    { code: '320114', name: '雨花台区' },
    { code: '320115', name: '江宁区' },
    { code: '320116', name: '六合区' },
    { code: '320117', name: '溧水区' },
    { code: '320118', name: '高淳区' }
  ],
  '330100': [ // 杭州市
    { code: '330102', name: '上城区' },
    { code: '330105', name: '拱墅区' },
    { code: '330106', name: '西湖区' },
    { code: '330108', name: '滨江区' },
    { code: '330109', name: '萧山区' },
    { code: '330110', name: '余杭区' },
    { code: '330111', name: '富阳区' },
    { code: '330112', name: '临安区' },
    { code: '330113', name: '临平区' },
    { code: '330114', name: '钱塘区' },
    { code: '330122', name: '桐庐县' },
    { code: '330127', name: '淳安县' },
    { code: '330182', name: '建德市' }
  ],
  '440100': [ // 广州市
    { code: '440103', name: '荔湾区' },
    { code: '440104', name: '越秀区' },
    { code: '440105', name: '海珠区' },
    { code: '440106', name: '天河区' },
    { code: '440111', name: '白云区' },
    { code: '440112', name: '黄埔区' },
    { code: '440113', name: '番禺区' },
    { code: '440114', name: '花都区' },
    { code: '440115', name: '南沙区' },
    { code: '440117', name: '从化区' },
    { code: '440118', name: '增城区' }
  ],
  '440300': [ // 深圳市
    { code: '440303', name: '罗湖区' },
    { code: '440304', name: '福田区' },
    { code: '440305', name: '南山区' },
    { code: '440306', name: '宝安区' },
    { code: '440307', name: '龙岗区' },
    { code: '440308', name: '盐田区' },
    { code: '440309', name: '龙华区' },
    { code: '440310', name: '坪山区' },
    { code: '440311', name: '光明区' }
  ],
  '500100': [ // 重庆市
    { code: '500101', name: '万州区' },
    { code: '500102', name: '涪陵区' },
    { code: '500103', name: '渝中区' },
    { code: '500104', name: '大渡口区' },
    { code: '500105', name: '江北区' },
    { code: '500106', name: '沙坪坝区' },
    { code: '500107', name: '九龙坡区' },
    { code: '500108', name: '南岸区' },
    { code: '500109', name: '北碚区' },
    { code: '500110', name: '綦江区' },
    { code: '500111', name: '大足区' },
    { code: '500112', name: '渝北区' },
    { code: '500113', name: '巴南区' },
    { code: '500114', name: '黔江区' },
    { code: '500115', name: '长寿区' },
    { code: '500116', name: '江津区' },
    { code: '500117', name: '合川区' },
    { code: '500118', name: '永川区' },
    { code: '500119', name: '南川区' },
    { code: '500120', name: '璧山区' },
    { code: '500151', name: '铜梁区' },
    { code: '500152', name: '潼南区' },
    { code: '500153', name: '荣昌区' },
    { code: '500154', name: '开州区' },
    { code: '500155', name: '梁平区' },
    { code: '500156', name: '武隆区' }
  ],
  '510100': [ // 成都市
    { code: '510104', name: '锦江区' },
    { code: '510105', name: '青羊区' },
    { code: '510106', name: '金牛区' },
    { code: '510107', name: '武侯区' },
    { code: '510108', name: '成华区' },
    { code: '510112', name: '龙泉驿区' },
    { code: '510113', name: '青白江区' },
    { code: '510114', name: '新都区' },
    { code: '510115', name: '温江区' },
    { code: '510116', name: '双流区' },
    { code: '510117', name: '郫都区' },
    { code: '510118', name: '新津区' },
    { code: '510121', name: '金堂县' },
    { code: '510129', name: '大邑县' },
    { code: '510131', name: '蒲江县' },
    { code: '510181', name: '都江堰市' },
    { code: '510182', name: '彭州市' },
    { code: '510183', name: '邛崃市' },
    { code: '510184', name: '崇州市' },
    { code: '510185', name: '简阳市' }
  ]
}

// 计算属性
const serviceAreaText = computed(() => {
  switch (areaType.value) {
    case 'nationwide':
      return '全国范围'
    case 'province':
      return selectedProvince.value ? `${getProvinceName(selectedProvince.value)}全省` : ''
    case 'city':
      if (selectedCities.value.length > 0) {
        const cityNames = selectedCities.value.map(code => getCityName(code))
        return cityNames.join('、')
      }
      return ''
    case 'district':
      if (selectedDistricts.value.length > 0) {
        const districtNames = selectedDistricts.value.map(code => getDistrictName(code))
        return districtNames.join('、')
      }
      return ''
    case 'custom':
      return customArea.value
    default:
      return ''
  }
})

// 方法
const handleAreaTypeChange = () => {
  // 清空之前的选择
  selectedProvince.value = ''
  selectedCity.value = ''
  selectedCities.value = []
  selectedDistricts.value = []
  customArea.value = ''
  currentCities.value = []
  currentDistricts.value = []
}

const handleProvinceChange = () => {
  selectedCity.value = ''
  selectedCities.value = []
  selectedDistricts.value = []
  currentDistricts.value = []
  
  // 加载城市数据
  if (selectedProvince.value && cityData[selectedProvince.value]) {
    currentCities.value = cityData[selectedProvince.value]
  } else {
    currentCities.value = []
  }
}

const handleCityChange = () => {
  selectedDistricts.value = []
  
  // 加载区县数据
  if (selectedCity.value && districtData[selectedCity.value]) {
    currentDistricts.value = districtData[selectedCity.value]
  } else {
    currentDistricts.value = []
  }
}

const getProvinceName = (code) => {
  const province = provinces.value.find(p => p.code === code)
  return province ? province.name : ''
}

const getCityName = (code) => {
  const city = currentCities.value.find(c => c.code === code)
  return city ? city.name : ''
}

const getDistrictName = (code) => {
  const district = currentDistricts.value.find(d => d.code === code)
  return district ? district.name : ''
}

// 监听服务区域文本变化，更新v-model
watch(serviceAreaText, (newValue) => {
  emit('update:modelValue', newValue)
  emit('change', {
    areaType: areaType.value,
    areaText: newValue,
    areaData: {
      province: selectedProvince.value,
      city: selectedCity.value,
      cities: selectedCities.value,
      districts: selectedDistricts.value,
      custom: customArea.value
    }
  })
}, { immediate: true })

// 初始化
onMounted(() => {
  if (props.modelValue) {
    // 如果有初始值，尝试解析
    customArea.value = props.modelValue
    areaType.value = 'custom'
  }
})
</script>

<style scoped>
.service-area-selector {
  width: 100%;
}

.area-config {
  margin-top: 16px;
}

.selected-area-info {
  margin-top: 12px;
}

.area-tag {
  margin-right: 8px;
  margin-bottom: 4px;
}

.area-preview {
  margin-top: 16px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
}

.preview-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
}

.preview-content .el-icon {
  color: #409eff;
}

:deep(.el-alert) {
  margin-top: 12px;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-textarea) {
  width: 100%;
}
</style>
